<template>
  <div class="enterPanel">
    <h5>快速新建入口</h5>
    <el-row :gutter="20" class="fs16 flex-wrap" type="flex">
      <el-col
        :span="2"
        v-for="item in enterList"
        :key="item.id"
        class="el-col mb15 pointer"
        align="center"
        @click.native="enterBtn(item)"
      >
        <img :src="item.img" alt="" class="img" />
        <p class="mt5 toe">{{ item.name }}</p>
      </el-col>
    </el-row>

    <component
      :ref="newParams.routerType"
      :is="newParams.routerType"
      :obj="newParams.obj"
      :row-info="newParams.rowInfo"
      v-if="newParams.visible"
      v-model="newParams.visible"
    ></component>

    <zm-select-type v-if="selectTypeParams.visible" v-model="selectTypeParams.visible" type-title="选择产品类型" :type-list="typeList" @after-save="selectTypeChange"></zm-select-type>
  </div>
</template>
<script>
import customerPic from '@/assets/work/customer.png'
import followPic from '@/assets/work/follow.png'
import invoicePic from '@/assets/work/invoice.png'
import productDraftPic from '@/assets/work/productDraft.png'
import saleOrderPic1 from '@/assets/work/saleOrder1.png'
import saleOrderPic2 from '@/assets/work/saleOrder2.png'
import saleOrderPic3 from '@/assets/work/saleOrder3.png'
import book from '@/assets/work/book.png'
import service from '@/assets/work/service.png'
import goods from '@/assets/work/goods.png'
import wenlv from '@/assets/work/wenlv.png'

import { entranceInfo } from '@/api/src/workbench'
import customer from '@/views/customer/customerList/components/New' // 新建客户
import saleOrder from '@/views/saleOrder/saleOrderList/New' // 日常销售单 特殊销售单 客情销售单 包场 实物 文旅
import follow from '@/views/customer/customerFollow/components/New' // 客户跟进
import productDraft from '@/views/product/productConfig/components/NewProduct' // 新建自有产品
import physicalProductConfig from '@/views/product/physicalProductConfig/components/newProduct' // 新建实物产品

import invoice from '@/views/financial/invoiceList/components/New' // 新建发票

import ZmSelectType from '@/components/ZmSelectType'

export default {
  components: { customer, saleOrder, follow, productDraft, physicalProductConfig, invoice, ZmSelectType },
  data () {
    return {
      enterList: [],
      newParams: {
        visible: false,
        obj: {},
        rowInfo: {
          type: ''
        },
        routerType: ''
      },
      selectTypeParams: {
        visible: false
      },
      typeList: [
        {
          label: '自有产品',
          value: '1',
          desc: '兑换券、卖品券、优惠券、点卡、次卡等',
          icon: 'workbench'
        },
        {
          label: '实物产品',
          value: '2',
          desc: '实物商品',
          icon: 'goods'
        }
      ]
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      this.enterList = await entranceInfo()
      console.log(this.enterList, 'this.enterList')
      this.enterList.map(item => {
        const type = item.apiUrl.split('/')[1]
        item.routerType = type

        switch (type) {
          case 'customer':
            item.img = customerPic
            break
          case 'follow':
            item.img = followPic
            break
          case 'invoice':
            item.img = invoicePic
            break
          case 'productDraft':
            item.img = productDraftPic
            break
          case 'saleOrder':
            // 1日常销售单 2特殊销售单 3客情销售单 4包场销售单 5客诉销售单 6实物销售单 7文旅销售单
            if (+item.type === 3) {
              item.img = saleOrderPic1
            } else if (+item.type === 4) {
              item.img = saleOrderPic2
            } else if (+item.type === 5) {
              item.img = saleOrderPic3
            } else if (+item.type === 8) {
              item.img = book
            } else if (+item.type === 9) {
              item.img = service
            } else if (+item.type === 10) {
              item.img = goods
            } else if (+item.type === 11) {
              item.img = wenlv
            }
            break
          default:
            break
        }
      })
    },
    enterBtn (val) {
      if (+val.type === 6) {
        this.selectTypeParams = {
          visible: true
        }
        return
      }

      this.newParams = {
        visible: true,
        obj: {},
        rowInfo: {
          type: +val.type < 8 ? +val.type - 2 : +val.type - 4
        },
        routerType: val.routerType
      }
    },
    selectTypeChange (type) {
      this.selectTypeParams = {
        visible: false
      }
      this.newParams = {
        visible: true,
        obj: {},
        rowInfo: {
          type: type
        },
        // type 1 自有产品  , type 2 实物产品
        routerType: type === '1' ? 'productDraft' : 'physicalProductConfig'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.enterPanel {
  background: #fff;
  margin: 0.57rem 0 0 0;
  padding: 0.1rem 0.82rem 0.82rem 0.82rem;
  .img {
    width: 2.22rem;
    height: 2.22rem;
  }
}
</style>
